<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const name = ref('谈啸')

const age = ref(18)
</script>
<template>
  <div>
    App: {{name}} age: {{age}}
    <hr/>
    <!-- <Child :modelValue="name" @update:modelValue="name = $event" /> -->
    <!-- // 和上面等价 -->
    <!-- <Child v-model:modelValue="name" /> -->
    <!-- // 和上面等价 -->
    <!-- Vue2 中传值的时候 v-model 只能写一次，.sync 可以写多次，他们两个都是传值时候一种便捷写法 -->

    <!-- //!Vue3 删除了 .sync 修饰符，Vue3 中的 v-model 相当于把 Vue2 中的 v-model 和 .sync 修饰符结合到了一起 -->
    <Child v-model="name" @update:age="age = $event" />
    <!-- v-model 比较便捷，父亲少了事件监听和赋值的操作 -->
    <!-- 当父亲有一个数据，儿子需要修改的时候，就可以使用这种便捷写法 -->
    <Child v-model="name" v-model:age="age" />
  </div>
</template>
